<template>
  <div class="app-container">
    <el-form v-show="showSearch" :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="创客账号">
        <el-input
          v-model.trim="form.accountNumber"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="reset()">重置</el-button>
        <el-button type="primary" @click="handleQuery()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="创客名称" align="center" prop="nickName" />
      <el-table-column label="创客账号" align="center" prop="userName" width="160" />
      <el-table-column label="创客类型" align="center" prop="type" />
      <el-table-column label="交易总额" align="center" width="160">
        <template #default="{ row }">
          <el-tooltip>
            <template #content>
              <span> 实付金额： {{ row.allPayMoney }}</span
              ><br />
              <span> 赠送消费金： {{ row.giftGold || 0 }}</span>
            </template>
            <el-button type="primary" link>
              {{ additionOperation(+row.allPayMoney, +row.giftGold) }}</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="叁与分账总额" align="center" prop="allPayMoney" />
      <el-table-column label="分账总金额" align="center" prop="allMoney" />
      <el-table-column label="当前待结算资金" align="center" prop="allFreezeMoney" width="160" />
      <el-table-column label="可提现金额" align="center" prop="canWithdrawMoney" width="160" />
      <el-table-column label="已提现金额" align="center" prop="alreadyWithdrawMoney" width="160" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList()"
    />
  </div>
</template>

<script setup>
import { getCreatorListApi } from '@/api/fund/InvestorStatistics'
import { additionOperation } from '@/utils/tools'

const showSearch = ref(true)
const list = ref([])
const form = ref({
  accountNumber: ''
})
const creatorTypeOptions = ref([
  { label: `创客-特约商户`, value: 1 },
  { label: `创客-普通商户`, value: 2 },
  { label: `创客-个人`, value: 3 },
  { label: `创客-服务商`, value: 4 }
])
const loading = ref(false)
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})

/**重置数据页码为 1 */
function reset() {
  form.value.accountNumber = ''
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  getList()
}
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/**获取 创客用户 数据 */
function getList() {
  loading.value = true
  getCreatorListApi({ accountNumber: form.value.accountNumber, ...queryParams.value }).then(
    (res) => {
      loading.value = false
      console.log(res)
      if (res.data && res.data.rows) {
        total.value = res.data.total
        list.value = res.data.rows.map((item) => {
          return {
            ...item,
            type: creatorTypeOptions.value.find((ev) => ev.value == item.type).label
          }
        })
      }
    }
  )
}
getList()
</script>

<style lang="scss">
.el-input {
  width: 215px;
}
</style>
